import React, { useEffect, useState, useRef } from "react";
import { Input, Layout, Button, Radio, Skeleton, Switch, Card, Avatar, Tree, Table, Space } from 'antd';
import { request } from 'dw-mx-request';
import { useHistory, useLocation } from 'dw-mx-router';
import './style/dataSource.css';
import DataSourceConfigPara from '@/dataSource/DataSourceConfigPara';
import DataSourceConfigRun from '@/dataSource/DataSourceConfigRun';
import paraPic from './style/images/para.png';
import runPic from './style/images/run.png';


export default function DataSourceConfig(props) {

    const { Sider } = Layout;
    const history = useHistory();
    const [resourceID, setResourceID] = useState('');
    const [targetPage, setTargetPage] = useState(<DataSourceConfigPara resourceID={resourceID}/>);

    useEffect(() => {
    }, []);



    //切换为参数配置页面
    const changeParaPage = () => {
        setTargetPage(<DataSourceConfigPara resourceID={resourceID}/>);
    };

    //切换为接口调用页面
    const changeRunpage = () => {
        setTargetPage(<DataSourceConfigRun resourceID={resourceID}/>);
    };

    return (
        <>
            <Layout style={{height: '100%'}}>
                <Sider theme={'light'} width={50}>
                    <div className={'dlc-dsconfig-left-pic'}>
                        <img className={'dlc-dsconfig-left-img'} src={paraPic} onClick={changeParaPage}/>
                    </div>
                    <div className={'dlc-dsconfig-left-pic'}>
                        <img className={'dlc-dsconfig-left-img'} src={runPic} onClick={changeRunpage}/>
                    </div>
                </Sider>
                <Layout>
                    {targetPage}
                </Layout>
            </Layout>
        </>
    );
}